{% extends 'base.html' %}
{% block title %}权限管理{% endblock %}
{% block body %}
    <div class="panel">
        <div class="panel-title">
            <h3 class="fleft">
                权限管理
                <span class="layui-badge-rim c-green font-iosevka">
                    权限组及权限明细管理
                </span>
            </h3>
            <div class="fright">
                <form id="frm_search" class="layui-form" lay-filter="frm_search">
                    <div class="layui-inline">
                        <label>权限标识：</label>
                        <div class="layui-input-inline">
                            <input name="role" type="text" class="layui-input txt-focus" value=""
                                   placeholder="">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div>
                            <button class="layui-btn btn-default" lay-submit="" lay-filter="btn_search"
                                    id="btn_search" type="submit">
                                <i class="ficon icon-search_list"></i>权限查询
                            </button>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div>
                            <button id="f_btn_add" class="layui-btn btn-success" type="button"><i
                                    class="ficon icon-jia"></i>新增权限组
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel-box pl25">
            <div id="grid_main">
                <table id="tbl_main" lay-filter="tbl_main"></table>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <div id="div_add_edit" class="layer-pop">
        <form class="layui-form layui-form-pane" lay-filter="frm_add_edit" id="frm_add_edit">
            <div class="layui-form-item">
                <label class="layui-form-label">权限标识：</label>
                <div class="layui-input-block">
                    <input name="role" type="text" class="layui-input" value="" placeholder="如: MyRoleGroup"
                           lay-verify="required" lay-vertype="tips">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限名称：</label>
                <div class="layui-input-block">
                    <input name="role_name" type="text" class="layui-input" value="" placeholder="如: 通用权限组"
                           lay-verify="required" lay-vertype="tips">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">允许的权限：</label>
                <div class="layui-input-block">
                    <textarea name="role_allow" class="layui-textarea" placeholder="英文逗号分隔每个权限, 如:
asn,bgp.bgp_index,bgp.bgp_list" lay-verify="required" lay-vertype="tips"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">禁止的权限：</label>
                <div class="layui-input-block">
                    <textarea name="role_deny" class="layui-textarea" placeholder="英文逗号分隔每个权限(可为空), 如:
asn.asn_delete"></textarea>
                </div>
            </div>
            <div class="center">
                <input type="hidden" name="role_id" class="pop-role-id" value="0">
                <button class="layui-btn layui-btn-sm btn-primary" type="submit" lay-submit lay-filter="btn_save">
                    <i class="ficon icon-gou"></i>保 存
                </button>
                <button class="layui-btn layui-btn-sm btn-warning" id="btn_close" type="button">
                    <i class="ficon icon-cha"></i>取 消
                </button>
            </div>
        </form>
    </div>
    <script type="text/html" id="bar_action">
        <div class="layui-btn-group">
            {% if is_can('role.role_add_edit') %}
                <a class="layui-btn layui-btn-sm btn-primary" lay-event="edit">修改</a>
                <a class="layui-btn layui-btn-sm btn-brown" lay-event="delete">删除</a>
            {% endif %}
        </div>
    </script>
    <script>
        $(function () {
            const BTN_SEARCH = $('#btn_search');
            let FN = {
                // 主表
                tb_main: function (d) {
                    let height = $('#grid_main').height();
                    height < 222 && (height = 345);
                    let cfg = {
                        elem: '#tbl_main',
                        even: true,
                        height: height,
                        page: true,
                        dataPage: true,
                        limit: 60,
                        loading: true,
                        cols: [[
                            {type: 'numbers'},
                            {field: 'role', title: '权限标识', width: 150, sort: true},
                            {field: 'role_name', title: '权限名称', width: 150},
                            {field: 'role_allow', title: '允许的权限'},
                            {field: 'role_deny', title: '禁用的权限'},
                            {title: '操作', width: 140, align: 'center', fixed: 'right', toolbar: '#bar_action'}
                        ]],
                        d: {
                            url: '{{ url_for('role.role_list') }}',
                            where: d || $('#frm_search').serializeJson()
                        }
                    };
                    $.autoTbl(cfg);
                },
                // 新增修改权限组
                add_edit: function (data) {
                    FN.reset_form('#frm_add_edit');
                    let title = '新增权限组';
                    data = data || {};
                    if (data.role_id) {
                        form.val('frm_add_edit', data);
                        title = '修改权限组';
                    }
                    layer.open({
                        title: title,
                        type: 1,
                        content: $('#div_add_edit'),
                        success: function (layero, index) {
                            form.on('submit(btn_save)', function (d) {
                                var btn = $(this);
                                $.mkAjax(d.field, '{{ url_for('role.role_add_edit') }}', title,
                                    function (r) {
                                        BTN_SEARCH.trigger('click');
                                        index && layer.close(index);
                                    }, btn);
                                return false;
                            });
                            $('#btn_close').on('click', function () {
                                index && layer.close(index);
                            });
                        }
                    });
                    return false;
                },
                // 删除
                delete: function (d) {
                    let txt = '确定删除权限组（<b>' + d.role_name + '</b>）？<br>' +
                        '<b class="c-danger">该权限组的所有用户将无法登录!</b>';
                    layer.confirm(txt, {icon: 3, title: '请仔细核对'}, function () {
                        $.mkAjax({role_id: d.role_id}, '{{ url_for('role.role_delete') }}', '删除权限组',
                            function (r) {
                                BTN_SEARCH.trigger('click');
                            });
                    });
                    return false;
                },
                // 弹出层大小
                get_pop_area: function () {
                    let w = $(window).width();
                    let h = $(window).height();
                    w = w > 880 ? 880 : (w - 20);
                    h = h > 600 ? 600 : h;
                    return [w, h];
                },
                // 清除表单
                reset_form: function (dom) {
                    if ($(dom).length) {
                        $(dom)[0].reset();
                        $('.pop-role-id').val(0);
                        form.render();
                    }
                }
            };

            FN.tb_main();

            // 查询
            form.on('submit(btn_search)', function (data) {
                FN.tb_main(data.field);
                return false;
            });

            // 新增
            $('#f_btn_add').on('click', function () {
                FN.add_edit();
            });

            table.on('tool(tbl_main)', function (obj) {
                let data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        FN.add_edit(data);
                        break;
                    case 'delete':
                        FN.delete(data);
                        break;
                    default:
                        break;
                }
            });
        });
    </script>
{% endblock %}